<template>
	<el-row style="height:100%">
		<div class="title-header">
			<div style="color: white;position: absolute;font-weight: bold;font-size: 30px;left: 50px;">
				<img style="height: 80px;margin-top: 10px;" src="../../assets/dzy_logo.png" />
			</div>
			<div style="color: white;position: absolute;font-weight: bold;font-size: 30px;line-height: 100px;left: 150px;">
				蒸汽超市商户入驻
			</div>
			<div @click="checkUser" style="color: white;position: absolute;font-weight: bold;font-size: 15px;line-height: 100px;right: 100px;">
				返回首页
			</div>
		</div>
		<div>
			<div style="margin: 0 auto;display: block;width: 80%;margin-top: 20px;margin-left: 23%;">
				<el-steps :active="state">
					<el-step title="绑定手机号"></el-step>
					<el-step title="录入基本信息"></el-step>
					<el-step title="注册成功"></el-step>
				</el-steps>
			</div>
			<div v-show="state==1" style="margin: 0 auto;display: block;width: 50%;margin-top: 100px;">
				<el-form :rules="phoneRules" ref="phoneForm" :model="form" label-width="80px">
					<el-form-item label="手机号" prop="mobilePhone">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.mobilePhone"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="验证码">
						<el-row :gutter="20">
							<el-col :span="15">
								<el-input v-model="form.name"></el-input>
							</el-col>
							<el-col :span="5">
								<el-button>验证码</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<div style="text-align: center;margin-top: 10px;">
							<el-button type="primary" @click="checkUser">下一步</el-button>
							<!--<el-button>取消</el-button>-->
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div v-show="state==2" style="margin: 0 auto;display: block;width: 50%;margin-top: 70px;">
				<el-form :rules="infoRules" ref="form" :model="form" label-width="80px">
					<el-form-item label="店铺名称" prop="name">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.name" placeholder="注册后可修改"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="营业执照" prop="realName">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-upload ref="shopUpload" action="http://120.77.207.47:8080/api/attachMentController/uploadAttachMent.do" :data="uploadForm" list-type="picture-card" :before-upload="beforeShopUpload" :on-success="uploadSuccess" :on-preview="handlePictureCardPreview2" :disabled="false" :on-remove="handleRemove">
									<i class="el-icon-plus"></i>
								</el-upload>
								<el-dialog v-model="dialogVisible" size="tiny">
									<img width="100%" :src="dialogImageUrl" alt="">
								</el-dialog>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="执照号码" prop="shopCardId">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.shopCardId" placeholder="营业执照号码"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="负责人" prop="realName">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.realName" placeholder="真实姓名"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="身份证" prop="realName">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-upload ref="shopUpload" action="http://120.77.207.47:8080/api/attachMentController/uploadAttachMent.do" :data="uploadForm" list-type="picture-card" :before-upload="beforeShopUpload2" :on-success="uploadSuccess2" :on-preview="handlePictureCardPreview2" :disabled="false" :on-remove="handleRemove2">
									<i class="el-icon-plus"></i>
								</el-upload>
								<el-dialog v-model="dialogVisible" size="tiny">
									<img width="100%" :src="dialogImageUrl" alt="">
								</el-dialog>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="身份证号" prop="idCard">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.idCard" placeholder="身份证号码"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="登录密码" prop="password">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input type="password" v-model="form.password" placeholder="输入登录密码"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="确认密码" prop="password2">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input type="password" v-model="form.password2" placeholder="确认登录密码"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.email" placeholder="输入可用的邮箱"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="店铺简介" prop="shopInfo">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.shopInfo" :rows="5" type="textarea" placeholder="100字内简介"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="省市" prop="province">
						<el-row :gutter="20">
							<el-col :span="5">
								<el-select v-model="province" placeholder="请选择">
									<el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
									</el-option>
								</el-select>
							</el-col>
							<el-col :span="5" prop="name">
								<el-select v-model="city" placeholder="请选择">
									<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
									</el-option>
								</el-select>
							</el-col>
							<el-col :span="5" prop="name">
								<el-select v-model="district" placeholder="请选择">
									<el-option v-for="item in districtList" :key="item.id" :label="item.name" :value="item.id+';'+item.name">
									</el-option>
								</el-select>
							</el-col>
							<el-col :span="5" prop="name">
								<el-select v-model="street" placeholder="请选择">
									<el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="详细地址" prop="detail">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.detail"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="邮政编码" prop="zipCode">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-input v-model="form.zipCode"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<div style="text-align: center;margin-top: 10px;">
							<el-button @click="back">上一步</el-button>
							<el-button type="primary" @click="doSubmit">完成</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div v-show="state==3" style="text-align: center;margin: 0 auto;display: block;width: 50%;margin-top: 70px;font-size: 30px;">
				<i style="color:limegreen" class="el-icon-circle-check"></i> <span>注册成功</span>
				<div style="margin-top: 50px;">
					<el-button type="primary" @click="backLogin">返回首页</el-button>
				</div>
			</div>
		</div>
	</el-row>
</template>
<script>
	import {
		regUser,
		areaList,
	} from '../../api/shop'

	//	const coordtransform = KIT_Coordtransform.createNew();
	export default {
		components: {

		},
		data() {
			return {
				removeFlag: true,
				shopCardList: [],
				dialogImageUrl: '',
				dialogVisible: false,
				uploadForm: {
					id: "",
					type: "regisert"
				},
				infoRules: {
					name: [{
							required: true,
							message: '请输入店铺名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 4 到 20 个字符',
							trigger: 'blur'
						}
					],
					realName: [{
						required: true,
						message: '请输入负责人姓名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					password2: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}],
				},
				phoneRules: {
					mobilePhone: [{
							required: true,
							message: '请输入手机好',
							trigger: 'blur'
						},
						{
							min: 11,
							max: 11,
							message: '请输入正确手机号',
							trigger: 'blur'
						}
					],
				},
				form: {
					userType: 1,
					shopCardPath: "",
					idCardPath: "",
				},
				provinceList: [],
				cityList: [],
				districtList: [],
				streetList: [],
				state: 1,
				province: "",
				city: "",
				district: "",
				street: "",
			}
		},
		methods: {
			beforeShopUpload() {
				if(this.form.shopCardPath != "") {
					alert("请先删除上一张图片！");
					this.removeFlag = false;
					return false;
				}
			},
			beforeShopUpload2() {
				if(this.form.idCardPath != "") {
					alert("请先删除上一张图片！");
					this.removeFlag = false;
					return false;
				}
			},
			uploadSuccess(res, file, fileList) {
				this.form.shopCardPath = res.obj[0];
			},
			uploadSuccess2(res, file, fileList) {
				this.form.idCardPath = res.obj[0];
			},
			handleRemove(file, fileList) {
				debugger;
				if(this.removeFlag)
					this.form.shopCardPath = "";
				else
					this.removeFlag = true;
			},
			handleRemove2(file, fileList) {
				debugger;
				if(this.removeFlag)
					this.form.shopCardPath = "";
				else
					this.removeFlag = true;
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handlePictureCardPreview2(file) {
				debugger;
				this.form.shopCardPath = file.realPath;
			},
			backLogin: function() {
				this.$router.push({
					path: '/'
				});
			},
			checkUser() {
				this.$refs.phoneForm.validate((valid) => {
					if(!valid)
						return;
					this.uploadForm.id = this.form.mobilePhone;
					this.state = 2;
				})
			},
			doSubmit() {
				this.$refs.form.validate((valid) => {
					if(!valid)
						return;

					let that = this;
					let params = this.form;
					params.state = 0;
					params.province = this.province.split(";")[1];
					params.city = this.city.split(";")[1];
					params.district = this.district.split(";")[1];
					params.street = this.street;
					params.userName = params.mobilePhone;
					regUser(params).then(res => {
						that.state = 3;
						// console.log(this.iconload);
					}, res => {
						debugger;
					});
				});
			},
			getAreaList(pid) {
				let that = this;

				let params = {
					parentId: pid
				}

				areaList(params).then(res => {
					if(res.obj.length > 0) {
						if(res.obj[0].level == 1) {
							that.provinceList = res.obj;
						} else if(res.obj[0].level == 2) {
							that.cityList = res.obj;
						} else if(res.obj[0].level == 3) {
							that.districtList = res.obj;
						} else {
							that.streetList = res.obj;
						}
					}
					//					debugger
					// console.log(this.iconload);
				});
			},
			back() {
				this.state = 1;
			}
		},
		watch: {
			province: function(val, oldVal) {
				this.getAreaList(val.split(';')[0]);
			},
			city: function(val, oldVal) {
				this.getAreaList(val.split(';')[0]);
			},
			district: function(val, oldVal) {
				this.getAreaList(val.split(';')[0]);
			},
		},
		mounted() {
			this.getAreaList();
		}
	}
</script>

<style lang="scss">
	.title-header {
		height: 100px;
		background-color: #80c8fa;
		position: relative;
	}
</style>